<template>
	<view class="header">
		<view class="box">
			<image class="add" @click="add" :src="$imgUrl('/ic_add.png')"  v-if="shows"/>
			<view class="view" >
				<image class="icon" slot="prefix" :src="$imgUrl('/ic_search.png')" />
				<u--input class="input" border="none"  clearable @blur="toSearch" v-model="value" placeholderStyle="color:#f1f1f1" color="#fff" fontSize="30" placeholder="输入相册名">
				</u--input>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		search: {
			type: String,
			default: ''
		},
		shows:{
			type: Boolean,
     	 	default: false
		}
	},
	data() {
		return {
			value: ''
		};
	},

	methods: {
		/**
		 * 跳搜索页
		 */
		toSearch() {
			// console.log(this.value);
			this.$emit('toSearch',this.value);
		},
		add(){
			this.$emit('clickadd')
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	width: 100%;
	overflow: hidden;
	// height: calc(var(--status-bar-height) + 100rpx);
	padding-top: calc(var(--status-bar-height) + 40rpx);
	// background-image:linear-gradient(to bottom ,#68DB95  ,#f1f1f1) ;
	background:url($imgUrl + "/search_bg.png") no-repeat; 
	padding-bottom: 26rpx;
		  background-size: 100% 100%;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 100;

	.box {
		margin-top: 30rpx;
		display: flex;
		height: 60rpx;
		align-items: center;
		width: 650rpx;
		margin-left: 30rpx;
		margin-right: 40rpx;
			padding-bottom: 10rpx;
			.add{
				height: 50rpx;
				width: 50rpx;
				margin-right: 20rpx;
			}
		.view {
			width: 450rpx;
			background-image: url($imgUrl + "/input_bg.png"); 
			background-repeat: no-repeat;
			  background-size: 100% 100%;
			  padding-left: 20rpx;
			  height: 75rpx;
			  display: flex;
			  align-items: center;
			  .icon {
					height: 40rpx;
					width: 40rpx;
				}
				.input {
					height: 44rpx;

					
				}
			
			.btn {
				@include btnMain();
				width: 200rpx;
				height: 66rpx;
				border-radius: 30rpx;
				margin-left: 30rpx;
				padding: 0 20rpx;
			}
		}
	}
}
</style>
